<template>
	 
		<div class="prizeDraw">
			<div class="prizeDraw_top">
				<div class="prizeDraw_top_close">
					选择报名表
					<div class class="prizeDraw_top_close_left" @click="backEvent()">
						取消
					</div>

					<div :class="isClick?'prizeDraw_top_close_right prizeDraw_top_close_right_act':'prizeDraw_top_close_right'"
						@click='addEvent()'>
						确认
					</div>

					<!-- <image src="@/static/image/close.png" mode="" class="closeImg" @click="backEvent()"></image> -->
				</div>
				<div class="prizeDraw_top_title">
					<input type="text" placeholder="请输入表单名称搜索" v-model="params.name"
						placeholder-class="zj-placeholder-class" @search='couponEvent'>
					<div class="inputSeach" @click='couponEvent()'>
						<image src="@/static/image/sousuo.png" mode=""></image>
					</div>
				</div>
				<div class='productItems_box'>

					<scroll-view @scrolltolower="scrolltolower" :style="{height:scrollViewHeight+'rpx'}"
						:scroll-y="true" :scroll-with-animation="true" class="productItems_scroll">

						<!-- <div class="productItems_box"> -->
						<div class="productItems" v-for="(ite,idx) in entryList" :key="idx"
							@click='entryEvent(ite,idx)'>
							<div class='productItemsIcon'>
								<div class='productItemsIconX' v-if="ite.check==false">

								</div>
								<div class='productItemsIconW' v-if="ite.check==true">
									<div class='productItemsIconWs'>

									</div>
								</div>
							</div>
							<div class="productItems_left">
								<div class="productItems_left_img">
									<image :src="ite.cover || ''" mode="aspectFit"></image>
								</div>
							</div>
							<div class="productItems_right">
								<div class="productItems_right_top">
									<div class="productItems_right_top_left ex">
										{{ite.name}}
									</div>
									<div class="productItems_right_top_right" v-if='ite.reviewStatus == 1'>
										<div class='yd'></div> 需审核
									</div>
								</div>
								<div class="productItems_right_bottom">
									创建时间：{{ite.updateTime || ite.bindTime}}
								</div>
							</div>
						</div>
						<!-- </div> -->
						<div class="listSpace" v-if="entryList.length <= 0 && loading">
							<list-space></list-space>
						</div>

						<div class="zj_space">

						</div>
					</scroll-view>

				</div>
			</div>
		</div>
 
</template>

<script>
	export default {
		filters: {
			formatDate(v) {
				const value = v * 1000
				const data = new Date(value);
				const month = data.getMonth() + 1;
				const day = data.getDate();
				const year = data.getFullYear();
				const hours = data.getHours();
				const minutes = data.getMinutes();
				const seconds = data.getSeconds();
				const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				return formattedTime;
			},
			// [CouponTargetProductType.All, '全部商品'],
			// [CouponTargetProductType.Allowlist, '部分商品'],
			// [CouponTargetProductType.Denylist, '部分商品不可用'],
			targetProductTypeFilter(v) {
				var s = ''
				switch (v) {
					case 1:
						s = '全部商品'
						break;
					case 2:
						s = '部分商品'
						break;
					case 3:
						s = '部分商品不可用'
						break;
				}
				return s
			}
		},
		data() {
			return {
				params: {
					name: '',
					page: 1,
					pageSize: 10,
				},
				entryList: [],
				scrollViewHeight: 812,
				total: 0,
				redName: '',
				checkType: 0,
				loading: false,
				from: {

				},
				isClick: false, //选中
				isIte: {}
			}
		},
		async mounted() {
			this.params.orgId = await this.$utils.getOrgId(this)
			this.getProductList()
		},
		// onPullDownRefresh() {
		// 	this.params.page = 1
		// 	this.entryList = []
		// 	this.getProductList()
		// },
		methods: {
			// 确认添加
			addEvent() {
				if (!this.isClick) return uni.showToast({
					title: '请选择报名表',
					icon: 'none'
				})
				this.$emit('addEvent', this.isIte)
			},
			onPullDownRefreshEvent() {
				this.params.page = 1
				this.entryList = []
				this.loading = false
				this.getProductList()
			},
			// 选中
			entryEvent(ite, idx) {
				this.entryList.forEach((ite) => {
					ite.check = false
				})
				this.entryList[idx].check = true
				this.isClick = true
				this.isIte = ite
			},
			// 搜索
			couponEvent() {
				this.$utils.throttle((res) => {
					this.params.page = 1
					this.entryList = []
					this.getProductList()
				}, 800)
			},
			scrolltolower(e) {
				if (this.entryList.length < this.total) {
					this.params.page++
					this.getProductList()
				} else {
					uni.showToast({
						title: '已到底',
						icon: 'none'
					})
				}
				console.log('e.detail.scrollTop', e.detail.scrollTop)
			},
			async getProductList() {
				const {
					data
				} = await this.$request(this.$Api.entryFormList, this.params, "get")
				if(data.code!=200)return
				this.loading = true
				if (!data.data.list) return
				data.data.list.forEach((ite) => {
					ite.check = false
				})
				this.entryList = this.entryList.concat(data.data.list)
				this.total = data.data.total
				uni.stopPullDownRefresh()
			},
			// 中奖名单
			winnersEvemt(ite) {

			},
			backEvent() {
				this.$emit('closeProductMaskEvnet')
			},
			//推送
			async tuiSendRedEvent(ite) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定推送优惠劵吗？',
					success: async (res) => {
						console.log('res', res)
						if (res.confirm) {
							that.from.targetProductItems = []
							that.from.targetProductType = ite.targetProductType
							that.from.couponId = ite.couponId
							const {
								data
							} = await that.$request(that.$Api.activityCreate, that.from, "post")
							if (data.code !== 200) return
							that.couponEvent()
							uni.showToast({
								title: '操作成功',
								icon: 'none'
							})
						}
					}
				})
			},
			// productItemsEvent
			productItemsEvent(ite) {
				this.$emit('productItemsEvent', ite)
			}
		}
	}
</script>

<style lang="scss">
	.prizeDraw {
		width: 100%;
		height: 992rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		overflow-y: hidden;
		position: fixed;
		bottom: 0;
		left: 0;
		color: #464C5B;
		font-size: 28rpx;

		.productItems_box {
			width: 100%;
			height: auto;
			padding: 0 18rpx 24rpx 18rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 8rpx;

			.productItems_scroll {
				width: 100%;
				// height: 772rpx;
				background: #F5F9FF;
				border-radius: 8rpx;
				padding: 24rpx 16rpx;
				box-sizing: border-box;
			}

		}

		.productItems {
			width: 100%;
			min-height: 144rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin-bottom: 24rpx;
			padding: 24rpx 16rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.productItemsIcon {
				margin-right: 16rpx;

				.productItemsIconX {
					width: 32rpx;
					height: 32rpx;
					background: #F3F7FF;
					border: 2rpx solid #C2CBD6;
					border-radius: 50%;
				}

				.productItemsIconW {
					width: 32rpx;
					height: 32rpx;
					border: 2rpx solid #0073FF;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					.productItemsIconWs {
						width: 16rpx;
						height: 16rpx;
						background: #0073FF;
						border-radius: 50%;
					}
				}
			}

			.productItems_left {
				.productItems_left_img {
					width: 172rpx;
					height: 112rpx;
					background: #f5f5f5;
				}
			}

			.productItems_right {
				margin-left: 24rpx;
				width: calc(100% - 210rpx);

				.productItems_right_top,
				.productItems_right_bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 40rpx;
					font-size: 24rpx;
					color: #657180;

					.productItems_right_top_left {
						width: calc(100% - 180rpx);
						font-weight: 500;
						font-size: 28rpx;
						color: #464C5B;
						height: 40rpx;
						line-height: 40rpx;
						text-align: left;

					}

					.productItems_right_top_right {
						font-size: 24rpx;
						color: #657180;
						// width: 180rpx;
						text-align: right;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						color: #FF5A5F;

						.yd {
							width: 8rpx;
							height: 8rpx;
							background: #FF5A5F;
							border-radius: 50%;
							margin-right: 8rpx;
						}

					}

				}

				.productItems_right_bottom {
					margin-top: 24rpx;

					.productItems_right_bottom_left {
						color: #FF5A5F;
						font-size: 28rpx;
						font-weight: bold;

						span {
							color: #BFBFBF;
							font-size: 24rpx;
							margin-left: 16rpx;
							font-weight: 500;
						}

					}

					.productItems_right_bottom_right {
						width: 88rpx;
						height: 48rpx;
						background: #295EFF;
						border-radius: 8rpx;
						font-size: 28rpx;
						color: #fff;
						text-align: center;
						line-height: 48rpx;

					}

				}
			}
		}





		.prizeDraw_top {
			width: 100%;
			height: 100rpx;
			position: relative;
			text-align: center;
			font-size: 32rpx;
			line-height: 100rpx;


			.prizeDraw_top_close {

				align-items: center;
				padding: 0 32rpx;
				box-sizing: border-box;
				width: 100%;
				height: 110rpx;
				border-bottom: 1rpx solid #D8D8D8;

				text-align: center;
				position: relative;
				margin-bottom: 32rpx;

				.prizeDraw_top_close_left {
					width: 48rpx;
					height: 34rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #295EFF;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
					position: absolute;
					left: 32rpx;
					top: 32rpx;
				}

				.prizeDraw_top_close_right {
					width: 88rpx;
					height: 48rpx;
					background: #295EFF;
					border-radius: 8rpx;
					opacity: 0.5;
					position: absolute;
					right: 32rpx;
					top: 32rpx;
					line-height: 48rpx;
					color: #fff;
					text-align: center;
					font-size: 24rpx;
				}

				.prizeDraw_top_close_right_act {
					opacity: 1;
				}
			}


			.prizeDraw_top_close_left {
				position: absolute;
				left: 0;
				top: 10rpx;
				width: 44rpx;
				height: 44rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}


			.closeImg {
				position: absolute;
				right: 0;
				top: 32rpx;
				width: 32rpx;
				height: 32rpx;
			}

		}


		.prizeDraw_top_title {
			width: 100%;
			height: 96rpx;
			font-size: 28rpx;
			color: #464C5B;
			text-align: left;
			font-weight: 500;
			line-height: 64rpx;
			padding: 0 32rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
			position: relative;
			padding-bottom: 32rpx;

			input {
				width: 100%;
				height: 100%;
				border: 1rpx solid #979797;
				border-radius: 16rpx;
				padding: 0 124rpx 0 24rpx;
				box-sizing: border-box;
				font-size: 24rpx;

			}

			.inputSeach {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				right: 56rpx;
				top: 6rpx;
			}

		}


		.prizeDraw_user_item_top {
			width: 100%;
			height: 110rpx;
			border-bottom: 1rpx solid #D7DDE4;
			display: flex;
			justify-content: flex-start;
			padding: 0 24rpx;
			box-sizing: border-box;
			align-items: center;

			.prizeDraw_user_item_top_left {
				width: 62rpx;
				height: 62rpx;
				margin-right: 16rpx;

				image {
					border-radius: 50%;
				}
			}

		}

		.prizeDraw_items_cont_items {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 40rpx;
			margin-top: 20rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			font-size: 24rpx;

			color: #8C8C8C;

			.prizeDraw_items_cont_items_left {
				width: 100%;
				display: flex;
				align-items: center;


				.color_blue {
					color: #295EFF;
				}

				.prizeDraw_items_cont_items_cont {
					width: 480rpx;
					text-align: left;
					color: #464C5B;
				}
			}

		}

		.listSpace {
			padding-top: 100rpx;
		}

		.color_hui {
			background: #C8C9CC !important;
		}
	}
</style>